import React, { useState } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Tag,
  Avatar,
  Input,
  Select,
  Row,
  Col,
  Statistic,
  Typography
} from 'antd';
import {
  UserAddOutlined,
  SearchOutlined,
  EditOutlined,
  DeleteOutlined,
  UserOutlined,
  TeamOutlined,
  UsergroupAddOutlined
} from '@ant-design/icons';

const { Search } = Input;
const { Option } = Select;
const { Title } = Typography;

const Users = () => {
  const [loading, setLoading] = useState(false);

  // 模拟用户数据
  const [users] = useState([
    {
      id: 1,
      name: '张三',
      username: 'zhangsan',
      email: 'zhangsan@example.com',
      role: 'admin',
      status: 'active',
      lastLogin: '2024-01-15 10:30:00',
      department: '技术部',
    },
    {
      id: 2,
      name: '李四',
      username: 'lisi',
      email: 'lisi@example.com',
      role: 'user',
      status: 'active',
      lastLogin: '2024-01-14 16:45:00',
      department: '市场部',
    },
    {
      id: 3,
      name: '王五',
      username: 'wangwu',
      email: 'wangwu@example.com',
      role: 'user',
      status: 'inactive',
      lastLogin: '2024-01-10 09:15:00',
      department: '人事部',
    },
    {
      id: 4,
      name: '赵六',
      username: 'zhaoliu',
      email: 'zhaoliu@example.com',
      role: 'moderator',
      status: 'active',
      lastLogin: '2024-01-15 14:20:00',
      department: '技术部',
    },
  ]);

  // 表格列配置
  const columns = [
    {
      title: '用户',
      dataIndex: 'name',
      key: 'name',
      render: (text, record) => (
        <Space>
          <Avatar
            style={{ backgroundColor: '#00ffff', color: '#001529' }}
            icon={<UserOutlined />}
          />
          <div>
            <div style={{ fontWeight: '500' }}>{text}</div>
            <div style={{ opacity: 0.6, fontSize: '12px' }}>
              @{record.username}
            </div>
          </div>
        </Space>
      ),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: (role) => {
        const roleConfig = {
          admin: { color: '#ff4d4f', text: '管理员' },
          moderator: { color: '#faad14', text: '协调员' },
          user: { color: '#52c41a', text: '普通用户' },
        };
        const config = roleConfig[role] || { color: '#d9d9d9', text: '未知' };
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      render: (text) => <span>{text}</span>,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status) => (
        <Tag color={status === 'active' ? '#52c41a' : '#d9d9d9'}>
          {status === 'active' ? '活跃' : '非活跃'}
        </Tag>
      ),
    },
    {
      title: '最后登录',
      dataIndex: 'lastLogin',
      key: 'lastLogin',
      render: (text) => <span style={{ opacity: 0.7 }}>{text}</span>,
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button
            type="text"
            icon={<EditOutlined />}
            style={{ color: '#00ffff' }}
          >
            编辑
          </Button>
          <Button
            type="text"
            icon={<DeleteOutlined />}
            style={{ color: '#ff4d4f' }}
            danger
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div>
      {/* 页面标题 */}
      <div style={{ marginBottom: 24 }}>
        <Title level={2} style={{ margin: 0 }}>
          用户管理
        </Title>
        <div style={{ opacity: 0.7, marginTop: 8 }}>
          管理系统用户账户和权限
        </div>
      </div>

      {/* 统计卡片 */}
      <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(0, 255, 255, 0.1)',
              border: '1px solid rgba(0, 255, 255, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#00ffff' }}>总用户数</span>}
              value={users.length}
              prefix={<TeamOutlined style={{ color: '#00ffff' }} />}
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(82, 196, 26, 0.1)',
              border: '1px solid rgba(82, 196, 26, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#52c41a' }}>活跃用户</span>}
              value={users.filter(u => u.status === 'active').length}
              prefix={<UserOutlined style={{ color: '#52c41a' }} />}
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(255, 77, 79, 0.1)',
              border: '1px solid rgba(255, 77, 79, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#ff4d4f' }}>管理员</span>}
              value={users.filter(u => u.role === 'admin').length}
              prefix={<UsergroupAddOutlined style={{ color: '#ff4d4f' }} />}
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
        <Col xs={24} sm={12} lg={6}>
          <Card
            style={{
              background: 'rgba(250, 173, 20, 0.1)',
              border: '1px solid rgba(250, 173, 20, 0.2)',
              borderRadius: '12px',
            }}
          >
            <Statistic
              title={<span style={{ color: '#faad14' }}>本月新增</span>}
              value={2}
              prefix={<UserAddOutlined style={{ color: '#faad14' }} />}
              valueStyle={{ color: '#ffffff' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 用户表格 */}
      <Card
        title={
          <span style={{ fontSize: '16px' }}>用户列表</span>
        }
        extra={
          <Space>
            <Search
              placeholder="搜索用户"
              style={{ width: 200 }}
              prefix={<SearchOutlined style={{ color: '#00ffff' }} />}
            />
            <Select
              defaultValue="all"
              style={{ width: 120 }}
              placeholder="筛选角色"
            >
              <Option value="all">全部角色</Option>
              <Option value="admin">管理员</Option>
              <Option value="moderator">协调员</Option>
              <Option value="user">普通用户</Option>
            </Select>
            <Button
              type="primary"
              icon={<UserAddOutlined />}
              style={{
                background: 'linear-gradient(135deg, #00ffff, #0099ff)',
                border: 'none',
                color: '#001529',
              }}
            >
              新增用户
            </Button>
          </Space>
        }
        style={{
          background: 'rgba(0, 255, 255, 0.02)',
          border: '1px solid rgba(0, 255, 255, 0.1)',
          borderRadius: '12px',
        }}
        styles={{
          header: {
            background: 'rgba(0, 255, 255, 0.05)',
            borderBottom: '1px solid rgba(0, 255, 255, 0.1)',
          },
          body: {
            background: 'transparent',
          }
        }}
      >
        <Table
          columns={columns}
          dataSource={users}
          loading={loading}
          rowKey="id"
          pagination={{
            total: users.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `共 ${total} 条记录，第 ${range[0]}-${range[1]} 条`,
          }}
          style={{
            background: 'transparent',
          }}

        />
      </Card>
    </div>
  );
};

export default Users;

